<template>
    <view class="protocol-container">
        <!-- 协议列表 -->
        <view class="protocol-list">
            <view v-for="(item, index) in protocolList" :key="index" class="protocol-item" @click="viewProtocol(item)">
                <view class="protocol-info">
                    <text class="protocol-title">{{ item.title }}</text>
                </view>
                <text class="arrow-icon">›</text>
            </view>
        </view>

        <!-- 分页器 -->
        <view class="pagination-container" v-if="total > 0">
            <uni-pagination 
                :total="total" 
                :pageSize="queryParams.pageSize" 
                :current="queryParams.pageNum"
                @change="onPageChange" 
                show-icon="true" 
            />
        </view>

        <!-- 空状态 -->
        <view v-if="protocolList.length === 0 && !loading" class="empty-container">
            <view class="empty-icon">📋</view>
            <text class="empty-text">暂无协议数据</text>
        </view>

        <!-- 加载状态 -->
        <view v-if="loading" class="loading-container">
            <text class="loading-text">加载中...</text>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listAgreement } from '@/api/user.js'

// 查询参数
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    title: null,
    state: null,
})

// 协议列表数据
const protocolList = ref([])
const total = ref(0)
const loading = ref(false)

// 获取协议列表
const fetchProtocolList = async () => {
    try {
        loading.value = true
        const res = await listAgreement(queryParams.value)
        if (res.code === 200) {
            protocolList.value = res.rows || []
            total.value = res.total || 0
        } else {
            uni.showToast({ title: res.msg || '获取协议列表失败', icon: 'none' })
        }
    } catch (error) {
        console.error('获取协议列表失败:', error)
        uni.showToast({ title: '网络异常，请重试', icon: 'none' })
    } finally {
        loading.value = false
    }
}

// 分页切换事件
const onPageChange = (e) => {
    queryParams.value.pageNum = e.current
    fetchProtocolList()
}

// 查看协议详情
const viewProtocol = (item) => {
    uni.navigateTo({
        url: `/pages/user/children/protocol-detail?id=${item.id}`
    })
}

// 页面加载时获取数据
onMounted(() => {
    fetchProtocolList()
})
</script>

<style>
.protocol-container {
    min-height: 100vh;
    background-color: #f5f5f5;
}

/* 协议列表 */
.protocol-list {
    background-color: #fff;
    margin-top: 20rpx;
}

.protocol-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    background-color: #fff;
}

.protocol-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}

.protocol-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
}

.arrow-icon {
    font-size: 40rpx;
    color: #999;
    font-weight: bold;
}

/* 分页器 */
.pagination-container {
    background-color: #fff;
    padding: 30rpx;
    display: flex;
    justify-content: center;
}

/* 空状态 */
.empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 30rpx;
    background-color: #fff;
    margin-top: 20rpx;
}

.empty-icon {
    font-size: 80rpx;
    margin-bottom: 20rpx;
}

.empty-text {
    font-size: 28rpx;
    color: #999;
}

/* 加载状态 */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60rpx 30rpx;
    background-color: #fff;
    margin-top: 20rpx;
}

.loading-text {
    font-size: 28rpx;
    color: #999;
}
</style>
